<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: #111;
    }

    .particle {
      position: absolute;
      width: 8px;
      height: 8px;
      background-color: #fff;
      border-radius: 50%;
      animation: move 5s infinite linear, fadeInOut 5s infinite ease-in-out;
    }

    .particle::before,
    .particle::after {
      content: "";
      position: absolute;
      width: 4px;
      height: 4px;
      background-color: #fff;
      border-radius: 50%;
      animation: move 3s infinite linear, fadeInOut 3s infinite ease-in-out;
    }

    .particle::before {
      top: -10px;
    }

    .particle::after {
      top: 10px;
    }

    @keyframes move {
      0% {
        transform: translate(0, 0);
      }
      50% {
        transform: translate(50px, 50px);
      }
      100% {
        transform: translate(0, 0);
      }
    }

    @keyframes fadeInOut {
      0%, 100% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
    }

  </style>
</head>
<body>
  <!-- 创建多个粒子 -->
  <div class="particle"></div>
  <div class="particle" style="top: 50px; left: 100px;"></div>
  <div class="particle" style="top: 150px; left: 200px;"></div>
  <!-- 添加更多粒子... -->
</body>
</html>
